<template>
<!--  这里有我的  头部  左边部分  右边部分  外加左边的导航组件 和 一个现实table组件router-view-->
<el-container>
    <el-header>
        百杰212第二阶段管理系统
        <span>{{quanxian}}</span>
        <span>{{getType}}</span>
        <button @click="out">退出登录</button>
    </el-header>
    <el-container>
        <el-aside>
            <LeftNavAdmin v-if="quanxianNav"></LeftNavAdmin>
            <Leftnav v-else></Leftnav>
        </el-aside>
        <el-main>
            <router-view></router-view>
        </el-main>
    </el-container>
</el-container>

</template>

<script>
import Leftnav from '../components/Leftnav'
import LeftNavAdmin from '../components/leftnavAdmin'
import {mapActions,mapGetters} from 'vuex'
export default {
  name: 'Home',
  components: {
      Leftnav,
      LeftNavAdmin
  },
  computed:{
      ...mapGetters(['getType','quanxianNav']),
      quanxian(){
          if(this.$store.state.user.type==='admin'){
              return '管理员'
          }else if(this.$store.state.user.type==='user'){
              return '员工'
          }
      }
  },
  methods:{
      ...mapActions(['loginOut']),
      out(){
          this.loginOut()
          this.$router.push('/login')
      }
  }
}
</script>
<style>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }
    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        height:530px;

    }
    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        height: 530px;
    }
    body > .el-container {
        margin-bottom: 40px;
    }
</style>